<template>
  <div id="RoomStatus">
    <!-- 图例说明 -->
    <div id="convenient" v-show="isShow_onvenient">
      <Convenient class="Convenient"></Convenient>
    </div>
    <div class="top_nav">
      <el-tabs v-model="activeName" size="small" type="card" @tab-click="handleClick">
        <el-tab-pane label="日历" name="RoomStatus">
          <!-- <div style="background-color: white;height: 80vh;">
            <room-calendar />
          </div> -->
        </el-tab-pane>
        <el-tab-pane label="单日" name="TodayRoom">
          <!-- <TodayRoom></TodayRoom> -->
        </el-tab-pane>
        <el-tab-pane label="渠道" name="channel">
          <channel-status></channel-status>
        </el-tab-pane>
      </el-tabs>

      <!-- 搜索订单 -->
      <div class="right_tab">
        <el-popover placement="bottom" width="374" trigger="manual" v-model="visible">
          <div class="order_popover" id="order_popover">
            <div class="order_popover_title" v-if="!notHasSeachResult">搜索结果为创建时间半年内的信息</div>
            <div class="order_popover_content">

              <!-- 订单姓名/手机号 -->
              <div class="order_popover_content_List" v-if="seachResult.order_name && seachResult.order_name.length > 0">
                <div class="order_popover_content_List_title"> 订单姓名/手机号</div>
                <div class="order_popover_content_List_item" v-for="item in seachResult.order_name" :key="item.id">
                  <div>
                    <i style="color:black;" class="el-icon-tickets"></i>
                    <span>{{ item.name }}</span> -
                    <span>{{ item.phone }}</span>
                  </div>
                  <div>
                    <!-- type danger success warning-->
                    <el-tag effect="dark" size="mini"> {{ item.channel }} </el-tag>
                    <el-tag effect="dark" size="mini" type="warning"> {{ item.status }} </el-tag>
                  </div>
                </div>

              </div>
              <!-- END订单姓名/手机号 -->

              <!-- 订单号 -->
              <div class="order_popover_content_List" v-if="seachResult.order_no && seachResult.order_no.length > 0">
                <div class="order_popover_content_List_title">订单号</div>
                <div class="order_popover_content_List_item" v-for="item in seachResult.order_no" :key="item.id">
                  <div>
                    <i style="color:black;" class="el-icon-tickets"></i>
                    <span>{{ item.name }}</span> -
                    <span>{{ item.phone }}</span>
                  </div>
                  <div>
                    <!-- type danger success warning-->
                    <el-tag effect="dark" size="mini"> {{ item.channel }} </el-tag>
                    <el-tag effect="dark" size="mini" type="warning"> {{ item.status }} </el-tag>
                  </div>
                </div>
              </div>
              <!-- END订单号 -->

              <!-- 客户信息 -->
              <div class="order_popover_content_List" v-if="seachResult.user && seachResult.user.length > 0">
                <div class="order_popover_content_List_title"> 客户信息</div>
                <div class="order_popover_content_List_item" v-for="item in seachResult.user" :key="item.id">
                  <!-- user_id -->
                  <div>
                    <i style="color:black;" class="el-icon-user"></i>
                    <span>{{ item.name }}</span> -
                    <span>{{ item.phone }}</span>
                  </div>
                </div>

              </div>
              <!-- END客户信息 -->


              <!-- 房间号 -->
              <div class="order_popover_content_List" v-if="seachResult.room && seachResult.room.length > 0">
                <div class="order_popover_content_List_title">房间号</div>
                <div class="order_popover_content_List_item roomNo" v-for="item in seachResult.room" :key="item.id">
                  <i style="color:black;" class="el-icon-house"></i>
                  <div>
                    <p>
                      <span>{{ item.room_num }} </span>
                      <span> {{ item.room_title }}</span>
                    </p>
                    <p>
                      <span>
                        {{ item.status == 6 ? '已预定' : item.status == 7 ? '已入住' : item.status == 8 ? '已退房' : item.status
                          == 9 ? '已取消' : item.status == 5 ? '自动锁房' : item.status == 4 ? '手动锁房' :
                            item.status == 3 ? '保留房' : item.status == 2 ? '维修房' :
                              item.status == 1 ? '停用房' : item.status }}
                      </span>
                      <!-- 0正常 1停用房 2维修房 3保留房 4手动锁房 5自动锁房 6已预定 7已入住 8已退房 9已取消 -->

                      <span> {{ item.day_light }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <!-- END房间号 -->

              <!-- el-icon-edit 备注icon -->
              <div v-if="notHasSeachResult" style="text-align: center;">
                <p>没有找到匹配的结果，尝试其他关键词进行搜索</p>
              </div>
            </div>
          </div>

          <el-input slot="reference" size="small" style="width: 374px;" v-model="searchValue" @change="searchInfo"
            @input="searchInfo" placeholder="姓名/手机号/订单号/渠道订单号/房间号/备注">
            <i style="color:black;" slot="suffix" class="el-input__icon el-icon-search" @click="searchInfo"></i>
          </el-input>
        </el-popover>

        <el-popover placement="bottom" size="small" trigger="click" style="margin: 0 10px;">
          <div style="display:flex;flex-direction: column;">
            <el-button type="text" class="bt-hover" @click="open">批量开房</el-button>
            <el-button type="text" class="bt-hover" @click="close">批量关房</el-button>
          </div>
          <el-button plain slot="reference" size="small">批量开/关房</el-button>
        </el-popover>
        <el-button type="primary" @click="toPriceManage" size="small">房价管理</el-button>
      </div>
    </div>
    <!-- height: calc(100vh - 165px); -->
    <div class="roomState_view" v-if="activeName != 'channel'">
      <router-view />
    </div>
    <!-- 批量开关房dialog -->
    <el-dialog :visible.sync="batch_dialog" width="30%">
      <div class="batch_dialog_content">

        <!-- 选择房间 -->
        <div class="chooseRoom" v-show="isNext">
          <div class="batch_left">
            <div class="batch_left_title">
              <el-checkbox @change="isAllCheckedChange" v-model="isAllChecked"><span
                  style="color: black;">全选</span></el-checkbox>
              <div>{{ chooseRoom.length }}/{{ roomTotal }}</div>
            </div>
            <div class="batch_left_content">
              <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" @check-change="handleCheckChange"
                :props="defaultProps">
              </el-tree>
            </div>
          </div>

          <div class="batch_right">
            <div class="batch_right_title">
              已选房间<span style="margin-left: 10px;">( {{ chooseRoom.length }} )</span>
            </div>
            <div class="batch_right_content">
              <div class="batch_right_content_item" v-for="(item, index) in chooseRoom" :key="item.roomId">
                <div>{{ item.label }}</div>
                <i class="el-icon-close" @click="deleteChooseRoom(item, index)"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- END 选择房间 -->

        <!-- 确认开关房 -->
        <div class="chooseReson" v-show="isNext == false">
          <el-form :mode="form" :label-width="formLabelWidth">
            <el-form-item label="房间">
              <div class="chooseResonRoom">
                <div class="chooseResonRoom_item" v-for="(item, index) in chooseRoom" :key="item.roomId">
                  {{ item.label }}
                  <i class="el-icon-error" @click="deleteChooseRoom(item, index)"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker size="small" style="width: 300px;" v-model="form.date" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="类型" v-show="batch_title == '批量关房'">
              <div style="margin-top:-10px;">
                <el-radio-group v-model="form.status">
                  <el-radio :label="1">停用房</el-radio>
                  <el-radio :label="2">维修房</el-radio>
                  <el-radio :label="3">保留房</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" placeholder="请输入备注" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- END 确认开关房 -->

      </div>
      <!-- 标题slot -->
      <div slot="title" class="titleSlot">
        <div class="titleIcon" v-show="isNext == false" @click="isNext = true">
          <i class="el-icon-back"></i>返回
        </div>
        <span>{{ batch_title }}</span>
      </div>
      <!--end 标题slot -->

      <!-- footer slot -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="batch_dialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="getAction()" size="small" v-show="isNext == false">确 定</el-button>
        <el-button type="primary" @click="next()" size="small" v-show="isNext">下一步</el-button>
      </span>
      <!--end footer slot -->

    </el-dialog>
    <!-- end 批量开关房 -->

  </div>
</template>

<script>
// import RoomCalendar from "./componnets/RoomCalendar";
// import TodayRoom from './componnets/TodayRoom'
import ChannelStatus from './componnets/ChannelStatus'
import Convenient from "../../components/convenient_switch/Convenient.vue";
import { mapActions } from 'vuex'

export default {
  name: "RoomStatus",
  components: {
    // RoomCalendar,
    // TodayRoom,
    ChannelStatus,
    Convenient
  },

  data() {
    return {
      visible: false,//搜索订单 建议弹出框
      notHasSeachResult: false,//没有相匹配的结果
      hotel_id: sessionStorage.getItem('hotel_id'),
      activeName: "RoomStatus",//tabs绑定
      isShow_onvenient: true,//是否展示便捷开关
      isNext: true,//是否下一步
      isAllChecked: false,//是否全选
      batch: false,
      batch_dialog: false,
      batch_title: '批量开房',
      chooseids: [],//当前选中的节点id
      chooseRoom: [],//已选择的房间信息
      defaultProps: {//el-tree props
        children: "child",
      },

      treeData: [],//树形数据
      form: { //表单数据
        // room_num_ids: '',//int\string 	房间id 多个房间 逗号隔开 ： 24,25
        // start_date: '', 	//关房开始日期 2023-05-23
        // end_date: '', 	//关房结束日期 2023-05-23
        date: null,
        status: 1,//1停用房 2维修房 3保留房 //开房没有状态
        remarks: ''//备注
      },
      formLabelWidth: '50px',

      searchValue: null,//搜索框值
      seachResult: {
        order_no: [],
        order_name: [],
        user: [],
        room: [],
      },//搜索结果
      // seachResult: {
      //   order_no: [
      //     { order_no: "HMS2023111015134936", name: "tests", phone: "13649868987", hotel_id: 9483, remarks: "", status: "已预订", channel: "本地", id: 440 },
      //     { order_no: "HMS2023110918282059", name: "李", phone: "13366995588", hotel_id: 9483, remarks: "", status: "已预订", channel: "本地", id: 439 },
      //     { order_no: "HMS2023110918282008", name: "李", phone: "13366995588", hotel_id: 9483, remarks: "", status: "已预订", channel: "本地", id: 438 },
      //     { order_no: "HMS2023110816173432", name: "单日新增", phone: "19599665565", hotel_id: 9483, remarks: "", status: "已预订", channel: "本地", id: 437 },
      //     { order_no: "HMS2023110711532638", name: "q", phone: "13456567878", hotel_id: 9483, remarks: "", status: "已预订", channel: "本地", id: 436 }
      //   ],
      //   order_name: [
      //     { order_no: "HMS2023110711483227", name: "李123123", phone: "14422553322", hotel_id: 9483, remarks: "", status: "已预订", channel: "本地", id: 435 }
      //   ],
      //   user: [
      //     { id: 67, user_id: 67, name: "11", phone: "13648596263", hotel_id: 9483 },
      //     { id: 64, user_id: 64, name: "11", phone: "13648596263", hotel_id: 9483 },
      //     { id: 62, user_id: 62, name: "11", phone: "22", hotel_id: 9483 }
      //   ]
      // }
    };
  },
  created() {
    this.getAllRoom()
    this.checkHandover({// 登出
      hotel_id: sessionStorage.getItem('hotel_id'),
    })
  },
  methods: {
    ...mapActions('d2admin/statistics', [
      'checkHandover'
    ]),

    // 订单搜索
    searchInfo() {
      // this.visible = !this.visible
      if (this.searchValue) {
        this.visible = true
      } else {
        this.visible = false
        return
      }
      let data = {
        hotel_id: this.hotel_id,
        keywords: this.searchValue
      }
      this.my_request('supplier/hotel-pms-order/search', data, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          setTimeout(() => {
            if (data.length == 0) {
              this.notHasSeachResult = true
              this.seachResult = data
              console.log('没有找到匹配的值');
            } else {
              this.seachResult = data
              this.notHasSeachResult = false
              console.log("搜索值", this.searchValue);
              console.log("搜索结果", this.seachResult);
            }
          }, 500)
        }
      })

    },


    // top点击事件,跳转路由
    handleClick(tab, event) {
      if (tab.name == 'TodayRoom') {
        console.log(tab.name);
        this.$router.replace({ path: '/Today' })
      } else if (tab.name == 'RoomStatus') {
        this.$router.replace({ path: '/RoomStatus' })
      }
      // else if (tab.name == 'channel') {
      //   this.$router.replace({ path: '/ChannelStatus' })
      // }


      if (tab.name == 'channel') {//点击渠道页面时不展示便捷开关
        this.isShow_onvenient = false
      } else {
        this.isShow_onvenient = true
      }
    },

    // 获取当前酒店所有房间并且转换数据
    getAllRoom() {
      let data = {
        hotel_id: this.hotel_id
      }
      this.my_request('supplier/hotel-pms', data, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          this.treeData = data.map(item => {
            return {
              id: item.id,
              label: item.title,
              child: item.rooms.map(room => {
                return {
                  id: room.id,
                  label: room.room_num
                };
              })
            };
          });
        }
      })
    },

    /**
     * 确定按钮
     */
    getAction() {
      if ('批量开房' == this.batch_title) {
        let data = {
          room_num_ids: this.chooseids,
          start_date: this.form.date[0],
          end_date: this.form.date[1],
          remarks: this.remarks
        }
        this.my_request('supplier/hotel-pms/batch-open', data, "PUT").then(res => {
          // console.log(res, '批量开房结果');
          let { code, message } = res.data
          if (200 == code) {
            this.batch_dialog = false
            this.$message.success(message)
          } else {
            this.$message.error(message)
          }
        })
      }
      else if ('批量关房' == this.batch_title) {
        let data = {
          room_num_ids: this.chooseids,
          start_date: this.form.date[0],
          end_date: this.form.date[1],
          remarks: this.remarks,
          status: this.form.status
        }
        this.my_request('supplier/hotel-pms/batch-open', data, "PUT").then(res => {
          // console.log(res, '批量开房结果');
          let { code, message } = res.data
          if (200 == code) {
            this.batch_dialog = false
            this.$message.success(message)
          } else {
            this.$message.error(message)
          }
        })
      }
    },
    /**
     * 多选框状态改变事件
     * @param {*} data 发生变化的节点数据
     * @param {*} checked 是否选中
     */
    handleCheckChange(data, checked) {
      // 获取所有选中的节点id
      this.chooseRoom = []
      let ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      let nodes = this.$refs.tree.getCheckedNodes()
      console.log(nodes, 'nodes');
      this.treeData.forEach(item => {
        this.chooseids = ids.filter(pItem => item.id != pItem)// 过滤房型id
        nodes.forEach((nodsItem, index) => {
          if (nodsItem.id == item.id) {
            nodes.splice(index, 1)
          }
        })
      })
      this.chooseRoom = nodes
      console.log(this.chooseids, 'chooseids')
    },
    /**
     *  设置指定选中的节点
     * @param {*} selectArr 选中的节点id数组
     */
    setCheckedKeys(selectArr) {
      this.$refs.tree.setCheckedKeys(selectArr);
    },
    /**
     * 删除已选房间
     * @param index 删除房间下标
     */
    deleteChooseRoom(item, index) {
      this.chooseRoom.splice(index, 1)
      let deleteId = item.id
      this.chooseids = this.chooseids.filter(cItem => deleteId != cItem)//过滤当前删除的房间id
      this.treeData.forEach(item => {
        this.chooseids = this.chooseids.filter(pItem => item.id != pItem)// 过滤房型id
      })
      this.setCheckedKeys(this.chooseids)//指定选中房间
    },
    /**
     * 
     * @param {*} val 全选按钮状态
     */
    isAllCheckedChange(val) {
      if (val) {//全选
        let ischeckedIds = []
        this.treeData.forEach(item => {//获取所有子节点id
          item.child.forEach(items => {
            ischeckedIds.push(items.id)
          })
        })
        this.setCheckedKeys(ischeckedIds)
      } else {//全部取消选中
        this.setCheckedKeys([])
      }
    },
    /**
     * 下一步按钮
     */
    next() {
      if (this.chooseRoom.length == 0) {//如果没有选择房间则提示，
        this.$message.warning('您还未选择房间!');
        return
      }
      this.isNext = false
    },
    /**
     * 跳转到房价管理
     */
    toPriceManage() {
      this.$router.push({ path: '/Settings/RoomPriceSetting' })
    },

    open() {
      this.batch_dialog = true
      this.isNext = true
      this.batch_title = '批量开房'
    },
    close() {
      this.batch_dialog = true
      this.isNext = true
      this.batch_title = '批量关房'
    },

    isVacantDirty(data) {
      console.log("父组件", data);
    },


  },
  watch: {
    // 控制全选/全不选
    chooseRoom() {
      if (this.chooseRoom.length == this.roomTotal) {
        this.isAllChecked = true
      } else {
        this.isAllChecked = false
      }
    },
    // 关闭对话框 时清除数据
    batch_dialog() {
      if (!this.batch_dialog) {
        this.setCheckedKeys([])
        this.chooseRoom = []
        this.chooseids = []
        this.checked = false
      }
    }
  },
  computed: {
    // 计算房间总数
    roomTotal() {
      let total = 0
      this.treeData.forEach(item => {
        total += item.child.length
      })
      return total
    }
  }
};
</script>

<style lang="scss" scoped>
.top_nav {
  // background-color: antiquewhite;
  // height: 30px;
  // padding-bottom: 10px;
}

::v-deep .el-popover {
  // padding-right: 0px !important;
}

#order_popover::-webkit-scrollbar {
  width: 0;
  /* 设置滚动条宽度为0 */
}

.order_popover {
  max-height: 300px;
  overflow: auto;

  .roomNo {
    display: flex;
    align-items: center;
    font-weight: normal !important;
    justify-content: flex-start !important;
    height: 40px !important;

    i {
      margin-right: 10px;
    }

    p {
      line-height: 18px;
    }

    p:nth-child(2) {
      font-size: 12px;
      color: #a1a0a0;
    }
  }

  .order_popover_title {
    text-align: center;
    padding-bottom: 10px;
    font-size: 14px;
    border-bottom: 1px solid #d1d0d0;
  }

  .order_popover_content_List {
    .order_popover_content_List_title {
      margin: 20px 0 15px 0;
      color: #a1a0a0;
      font-size: 14px;
    }

    .order_popover_content_List_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 25px;
      padding-bottom: 5px;

      div:nth-child(1) {
        i {
          margin-right: 10px;
        }

        font-weight: bold;
      }

      div:nth-child(2) {
        .el-tag {
          margin-left: 5px;
          font-size: 10px;
        }
      }
    }
  }
}


#convenient {
  display: flex;
  justify-content: center;

  // align-items: center;
  .Convenient {
    width: 160px;
    margin: auto;
    margin-bottom: 5%;
  }

  .Convenient:hover {
    cursor: pointer;
  }
}



::v-deep .right_tab {
  .el-button.el-button--default.is-plain.el-popover__reference {
    height: 46px;
  }
}

.right_tab {
  position: absolute;
  display: flex;
  top: 18.5px;
  right: 0px;
  margin-right: 20px;
}



.roomState_view {
  width: 100%;
  height: calc(100vh - 50px);
  // margin-top: 1px;
  background-color: #EBF1F6 !important;
}



.bt-hover {
  padding: 10px;
  color: black;
}

.bt-hover:hover {
  background-color: #f5f7fd;
}

.el-button+.el-button {
  margin-left: 0px;
}

::v-deep .el-input.el-input--suffix>.el-input__inner {
  height: 46px;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
  border-radius: 4px 0 0 4px;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
  border-radius: 0px 4px 4px 0px;
}

::v-deep {

  .el-tabs--card>.el-tabs__header {
    border-bottom: none;
    margin: 20px 0;

    .el-tabs__nav {
      border-radius: 4px;
    }
  }

  .el-tabs__nav {
    background-color: white;
    margin-left: 20px;
  }

  .el-tabs__header {
    margin-bottom: 0px !important;
  }

  .el-tabs .el-tabs--top {
    height: 100% !important;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    font-size: 14px;
    color: rgba(4, 134, 254, 1);
    border: 1px solid rgba(4, 134, 254, 1);
    height: 43px;
    // background-color:rgba(4, 134, 254, 1) ;
    // color: white;
  }

  .el-tabs__content {
    margin-top: 1px;
  }
}


.el-tabs {
  border: none;
}

.dialog-footer .el-button {
  margin-right: 15px;
}

.titleSlot {
  display: flex;
  line-height: 25px;

  .titleIcon {
    background-color: #ECF0F6;
    margin-left: -20px;
    padding: 0px 15px 0 10px;
    font-size: 13px;
    margin-right: 15px;
    border-radius: 0% 20px 20px 0;

    i {
      margin-right: 5px;
    }

  }
}



.batch_dialog_content {
  margin-top: -20px;
  // height: 300px;
}

.chooseRoom {
  display: flex;
  justify-content: space-between;

  .batch_left {
    width: 48%;

    .batch_left_title {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      div {
        color: #ccc;
      }
    }

  }

  .batch_right {
    width: 45%;

    .batch_right_content {
      margin-top: 10px;

      .batch_right_content_item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        text-indent: 1.5em;

        i {
          font-size: 18px;
        }
      }
    }
  }
}

.batch_right_content,
.batch_left_content {
  height: 300px;
  overflow: auto;
}

.chooseResonRoom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.chooseResonRoom_item {
  width: 140px;
  height: 40px;
  box-shadow: 0 0 5px 2px #e9e7e7;
  text-align: center;
  margin-right: 15px;
  margin-bottom: 10px;
  position: relative;

  i {
    color: red;
    position: absolute;
    right: -5px;
    top: -5px;
  }
}
</style>
